<template>
  <el-container>
    <el-header>
      <login />
    </el-header>
    <el-main>
      <el-input
        @keyup.enter.native="inputEnter"
        v-model="inputContent"
        placeholder="搜索用户"
      ></el-input>
      <el-button v-show="searchUsers" @click="cancalSearch">取消搜索</el-button>
      <el-table
        :data="searchUsers || users"
        style="width: 800px"
      >
        <el-table-column
          prop="name"
          label="姓名"
        >
        </el-table-column>
        <el-table-column
          fixed="right"
        >
          <template #default="scope">
            <el-button @click="changePassword.click(scope.row)">修改密码</el-button>
          </template>
        </el-table-column>
<!--        <el-table-column
          fixed="right"
        >
          <template #default="scope">
            <el-button @click="freezeClick(scope.row)">冻结用户</el-button>
          </template>
        </el-table-column> -->
        <el-table-column
          fixed="right"
        >
          <template #default="scope">
            <!-- <button @click="deleteClick(scope.row)">删除用户</button> -->
            <el-popconfirm
              :title="'确定删除用户'+ scope.row.name +'吗？'"
              @confirm="deleteClick(scope.row)"
            >
            <template #reference>
              <el-button class="button">删除用户</el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
            @size-change="pagination.handleSizeChange"
            @current-change="pagination.handleCurrentChange"
            :current-page="pagination.currentPage"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="pagination.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="pagination.count">
      </el-pagination>
    </el-main>
  </el-container>
  
  <ChangePasswordDialog :state="changePassword.state"/>
</template>

<script>
import { ref, reactive, defineComponent,onMounted } from "vue";
import Login from "@c/navBar/Login.vue";
import service from "@/utils/request.js";
import { useStore } from "vuex";
import { CODE_KEY, CODE_SUCCESS } from "@/api/params";
import ChangePasswordDialog from "@c/navBar/user/ChangePasswordDialog.vue"
import { getAllUsers, deleteUser } from "@/api/axios/admin"
import { ElMessage } from 'element-plus'

export default defineComponent({
  components: {
    Login,
    ChangePasswordDialog
  },
  setup () {
    
    const store = useStore();
    
    const users = ref();
    const inputContent = ref()
    
    // 默认 每页显示数量
    const DEFAULT_PAGE_SIZE = 5;
    // 默认 当前页数
    const DEFAULT_CURRENT_PAGE = 1;
    // 默认总条数
    const DEFAULT_TOTAL_COUNT = 0;
    
    // 分页功能
    const pagination = reactive({
      count: DEFAULT_TOTAL_COUNT,
      currentPage: DEFAULT_CURRENT_PAGE,
      pageSize: DEFAULT_PAGE_SIZE,
      beforeCount: undefined,
      beforeCurrentPage: undefined,
      beforePagesize: undefined,
      handleSizeChange: (val) => {
        // 赋值
        pagination.pageSize = val;
        // 重新获取 数据
        if(searchUsers.value) {
          searchUsersFunc()
        } else {
          getUsers();
        }
      },
      handleCurrentChange: (val) => {
        // 赋值
        pagination.currentPage = val;
        // 重新获取 数据
        if(searchUsers.value) {
          searchUsersFunc()
        } else {
          getUsers();
        }
      }
    })
    
    const searchUsers = ref(undefined);
    
    // 查询 方法
    const searchUsersFunc = () => {
      service.request({
        method: "post",
        url: "/admin/searchUser",
        data: {
          username: store.getters.getUserInfo.username,
          searchUsername: inputContent.value,
          pageSize: pagination.pageSize,
          currentPage: pagination.currentPage
        }
      }).then(res => {
        if(res && res.data[CODE_KEY] === CODE_SUCCESS) {
          searchUsers.value = res.data.users;
          
          saveState();
          pagination.count = res.data.count
        }
      })
    }
    
    // 之前的(显示所有用户的时候)状态存储起来，并 设置为默认状态
    const saveState = () => {
      pagination.beforePagesize = pagination.pageSize;
      pagination.beforeCurrentPage = pagination.currentPage;
      pagination.beforeCount =  pagination.count;
      
      pagination.count = DEFAULT_TOTAL_COUNT;
      pagination.pageSize = DEFAULT_PAGE_SIZE;
      pagination.currentPage = DEFAULT_CURRENT_PAGE;
    }
    
    // 返回到之前的状态(显示所有用户的时候)
    const backState = () => {
      pagination.pageSize = pagination.beforePagesize;
      pagination.currentPage = pagination.beforeCurrentPage;
      pagination.count = pagination.beforeCount;
    }
    
    // 输入栏 触发回车
    const inputEnter = () => {
      if( inputContent.value && inputContent.value !== '') {
        searchUsersFunc()
      }
    }
    
    // 取消搜搜显示
    const cancalSearch = () => {
        backState()
        searchUsers.value = undefined;
        inputContent.value = undefined;
    }
    
    // 修改密码
    const changePassword = reactive({
      state: {
        changeUsername: undefined,
        visible: false,
      },
      click: (proxy) => {
        changePassword.state.changeUsername = proxy.name
        changePassword.state.visible = true
      }
    })
    
    // 冻结用户
    // const freezeClick = (proxy) => {
      
    // }
    
    // 删除用户
    const deleteClick = (proxy) => {
      
      deleteUser(proxy.name).then(res => {
        if (res && res.data[CODE_KEY] === CODE_SUCCESS) {
          ElMessage.success("删除成功");
          // 查找 显示的数组里的对应项
          for( let i = 0; i < users.value.length ; i++) {
            // 找到
            if(users.value[i].name === proxy.name) {
              // 从数组删除
              users.value.splice(i, 1);
            }
          }
        }
      })
    }
    
    // 获取所有用户信息
    const getUsers = () => {
      getAllUsers({ pageSize: pagination.pageSize, currentPage: pagination.currentPage }).then(res => {
        if(res && res.data[CODE_KEY] === CODE_SUCCESS) {
          users.value = res.data.users
          pagination.count = res.data.count
        }
      })
    }
    
    onMounted(() => {
      getUsers();
    })
    
    return {
      users,
      changePassword,
      // freezeClick,
      deleteClick,
      inputContent,
      inputEnter,
      searchUsers,
      cancalSearch,
      pagination,
    }
  }
})
</script>

<style scoped>
button.el-button {
  background-color: inherit;
  border: none;
}
</style>
